<template>
  <div class="system-voice-modal">
    <div class="voice-player">
      音频设备
      <div class="iconfont wos-to-top fs12" />
    </div>
    <div class="voice">
      <voice-icon
        class="voice-icon"
        :volume="systemSettingStore.$state.systemVolume"
        :muted="systemSettingStore.$state.systemMuted"
        @click.stop="handleMuted"
      />
      <div class="voice-line mr18 ml18" ref="voiceLineDom">
        <div class="line"></div>
        <div class="line-ac" :style="{ width: `${lineAcWidth}px` }">
          <div class="bar" @mousedown.stop="handleMousedown"></div>
        </div>
      </div>
      <span class="voice-num fs26">
        {{ systemSettingStore.$state.systemVolume }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import VoiceIcon from '@/components/taskBar/voiceIcon.vue'
import { onMounted, ref } from 'vue'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'

const systemSettingStore = useSystemSettingStore()
const lineAcWidth = ref<number>(10)
const voiceLineDom = ref<HTMLElement>()
let moveBarStart = false
const mouseInfo = { x: 0, y: 0 }

// 设置音量位置
const setVolume = (volume: number) => {
  if (!voiceLineDom.value) return
  lineAcWidth.value = (volume / 100) * (voiceLineDom.value.offsetWidth - 10)
  systemSettingStore.setSystemVolume(volume)
}

const handleMousemove = (ev: MouseEvent) => {
  if (!moveBarStart || !voiceLineDom.value) return
  const disX = ev.x - mouseInfo.x
  let volume = Math.floor((disX / (voiceLineDom.value.offsetWidth - 20)) * 100)
  volume = volume >= 100 ? 100 : volume <= 0 ? 0 : volume
  setVolume(volume)
}

const handleMouseup = () => {
  moveBarStart = false
  document.removeEventListener('mousemove', handleMousemove)
  document.removeEventListener('mouseup', handleMouseup)
}

const handleMousedown = (ev: MouseEvent) => {
  moveBarStart = true
  mouseInfo.x = ev.x - lineAcWidth.value + 10
  document.addEventListener('mousemove', handleMousemove)
  document.addEventListener('mouseup', handleMouseup)
}

const handleMuted = () => {
  systemSettingStore.setVoiceMuted()
}

onMounted(() => {
  setVolume(systemSettingStore.$state.systemVolume)
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/common';

.system-voice-modal {
  color: var(--task-bar-color);
  width: $task-modal-default-width;
  height: 100px;
  background-color: var(--task-modal-bg-color);
  border-left: 1px solid var(--task-modal-border-color);
  border-top: 1px solid var(--task-modal-border-color);
  padding: 0 20px;
  box-sizing: border-box;

  .voice-player {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    height: 40px;
  }

  .voice {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:hover {
      .voice-line {
        .line-ac {
          .bar {
            background-color: var(--task-bar-color);
          }
        }
      }
    }

    .voice-icon {
      width: 26px;
      min-width: 26px;
      height: 26px;
    }

    > .voice-line {
      width: 100%;
      position: relative;

      .line,
      .line-ac {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 2px;
        background-color: var(--task-bar-color);
      }

      .line-ac {
        background-color: var(--theme-color);

        .bar {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateX(100%) translateY(-50%);
          border-radius: 5px;
          width: 10px;
          height: 26px;
          background-color: var(--theme-color);
        }
      }
    }

    .voice-num {
      display: inline-block;
      width: 50px;
      min-width: 50px;
    }
  }
}
</style>
